<template>
  <div style="margin-top: 20px; background: #eee">
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in datas.images" :key="image">
          <van-image
            :src="image"
            radius="20px"
            style="height: 15vh; width: 95vw"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div></div>
    <div style="width: 90vw; margin: 0 auto; background: #f777c2">
      <van-image
        :src="require('@/assets/img/tu/t1.png')"
        radius="20px"
        style="height: 10vh; width: 90vw"
      />
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="item in datas.goods" :key="item.id">
          <van-image :src="item.url" radius="10" />
        </van-grid-item>
      </van-grid>
      <van-image :src="require('@/assets/img/tu/t6.png')" radius="10" />
    </div>
    <div style="margin-top: 10px">
      <van-cell-group inset>
        <van-cell
          title="别样　正品保障 消费者告知书"
          is-link
          style="height: 35px"
          title-style="text-align:left;line-height:20px;"
          :icon="require('@/assets/img/icon/logn.png')"
        />
      </van-cell-group>
    </div>
    <div
      style="
        width: 90vw;
        height:51vh;
        border-radius: 10px;
        background: #e1bc88eb;
        margin: 10px auto;
      "
    >
      <div
        style="
          display: flex;
          justify-content: space-around;
          height: 5vh;
          line-height:5vh;
        "
      >
        <div style="font-size: 18px; width: 55vw; text-align: left">
          <b>新人福利专区</b>
        </div>
        <div
          style="
            width: 20vw;
            height:4vh;
            border-radius: 20px;
            border: 1px solid black;
            margin-top: 1vh;
            line-height:4vh;
            font-size: 13px;
          "
        >
          立即领取
        </div>
      </div>
      <div style="width: 88vw;margin:5px auto;border-radius: 20px;">
        <van-grid :border="true" :column-num="4">
          <van-grid-item v-for="item in datas.newFL">
            <van-image :src="item.url" style="height: 80px" />
            <div style="font-size: 14px; color: #e1bc88eb">{{ item.pice }}</div>
            <div style="font-size: 8px">{{ item.jieshao }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-around;
          height: 5vh;
          line-height: 5vh;
        "
      >
        <div style="font-size: 18px; width: 82vw; text-align: left">
          <b>新人都爱买</b>
        </div>
      </div>
      <div style="width: 88vw;margin:5px auto;">
        <van-grid :border="false" :column-num="4">
          <van-grid-item v-for="item in datas.newShop">
            <van-image :src="item.url" style="height: 80px" />
            <div style="font-size: 14px; color: #e1bc88eb">{{ item.pice }}</div>
            <div style="font-size: 8px">{{ item.oldpice }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    
    <div style="height: 55px"></div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const datas = reactive({
  images: [
    "https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    "https://img1.baidu.com/it/u=3573056321,2239143646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
    "https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    "https://img2.baidu.com/it/u=1003272215,1878948666&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
    "https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
  ],
  goods: [
    {
      id: 1,
      url: require("@/assets/img/tu/t2.png"),
    },
    {
      id: 2,
      url: require("@/assets/img/tu/t3.png"),
    },
    {
      id: 3,
      url: require("@/assets/img/tu/t4.png"),
    },
    {
      id: 4,
      url: require("@/assets/img/tu/t5.png"),
    },
  ],
  newFL: [
    {
      id: 1,
      pice: "超值福利",
      jieshao: "新人专享",
      url: require("@/assets/img/goods/g1.png"),
    },
    {
      id: 2,
      pice: "￥320",
      jieshao: "本周低价爆款",
      url: require("@/assets/img/goods/g2.png"),
    },
    {
      id: 3,
      pice: "￥260",
      jieshao: "好价热卖",
      url: require("@/assets/img/goods/g3.png"),
    },
    {
      id: 4,
      pice: "",
      jieshao: "",
      url: require("@/assets/img/goods/g4.png"),
    },
  ],
  newShop: [
    {
      id: 1,
      pice: "￥59",
      oldpice: "　",
      url: require("@/assets/img/goods/g5.png"),
    },
    {
      id: 2,
      pice: "￥320",
      oldpice: "￥853",
      url: require("@/assets/img/goods/g2.png"),
    },
    {
      id: 3,
      pice: "￥178",
      oldpice: "￥704",
      url: require("@/assets/img/goods/g6.png"),
    },
    {
      id: 4,
      pice: "￥150",
      oldpice: "￥637",
      url: require("@/assets/img/goods/g7.png"),
    },
  ]
});
</script>
<style lang="scss" scoped>
::v-deep(.van-grid-item__content) {
  padding: 5px 5px;
}
.m {
  color: #e1bc88eb;
  justify-content: space-around;
}
</style>
